import React, { useState, useMemo } from 'react';


function Example() {
    const [xiaohong, setXiaohong] = useState("老板好！我是小红");
    const [zhiling, setZhiling] = useState("老板好！我是志玲");

    return (
        <>
            <button onClick={() => setXiaohong(new Date().getTime())}>小红</button>
            <button onClick={() => setZhiling(new Date().getTime() + '就选你了！')} style={{ marginLeft: `10px` }}>志玲</button>
            <ChildrenCompont name={xiaohong}>
                {zhiling}
            </ChildrenCompont>
        </>
    )
}

function ChildrenCompont({ name, children }) {
    function changeXiaohong(name) {
        console.log(`她来了，她来了。她向我们走来了！`);
        return name + `，小红真的向我们走来了`
    }

    const actionXiaohong = useMemo(() => changeXiaohong(name), [name]);
    return (
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}


export default Example

